import React from 'react';
import { inject, observer } from 'mobx-react';
import * as mobx from 'mobx';
import { Popconfirm } from 'antd';
import { WeaTools, WeaLocaleProvider, WeaNewScroll, WeaTable } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

@inject('portalDeskTopStore')
@inject('portalThemeStore')
@observer
class MoreMenus extends React.Component {
    constructor(props) {
        super(props);
        this.onSetting = this.onSetting.bind(this);
        this.onAdd = this.onAdd.bind(this);
        this.onDelete = this.onDelete.bind(this);
        this.state = { isSetting: false };
    }

    render() {
        const { portalDeskTopStore, portalThemeStore } = this.props;
        const { state, setState } = portalDeskTopStore;
        const { isSystemer, moreDatas } = state;
        const { isSetting } = this.state;

        const columns = [
            {
                key: 'menuicon',
                dataIndex: 'menuicon',
                width: isSetting ? '48' : '60',
                render: (text, record) => (
                    <img
                      src={text || '/wui/theme/ecology9/image/layout/layout5/desktop-icon-default.png'}
                      alt=""
                      className="e9desktop-menu-more-img"
                      onClick={() => portalThemeStore.onLoadMain({ url: record.url, mobxrouteurl: record.mobxrouteurl })}
                    />
                ),
            }, {
                key: 'langmenuname',
                dataIndex: 'langmenuname',
                width: '*',
                render: (text, record) => (
                    <div className="e9desktop-menu-more-name" onClick={() => portalThemeStore.onLoadMain({ url: record.url, mobxrouteurl: record.mobxrouteurl })}>{text}</div>
                ),
            }, {
                key: 'operate',
                width: isSetting ? '60' : '10',
                render: (text, record, index) => (
                    <div>
                        {isSetting ? (
                                <div className="e9desktop-menu-more-icons">
                                    <i className="icon-coms-plus" title={getLabel(387141, '添加到桌面')} onClick={() => this.onAdd(index)} />
                                    {isSystemer || record.createtype == 'cus' ? (
                                            <Popconfirm ecId={`${this && this.props && this.props.ecId || ''}_Popconfirm@zwkmgw@${index}`} placement="topLeft" title={getLabel(15097, '确定要删除吗？')} onConfirm={() => this.onDelete(index)}>
                                                <i className="icon-coms-delete" title={getLabel(91, '删除')} />
                                            </Popconfirm>
                                        ) : ''
                                    }
                                </div>
                            ) : ''
                        }
                    </div>
                ),
            },
        ];

        return (
            <div className="e9desktop-menu-more">
                <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@rg3be3`} height="100%">
                    <div style={{ maxHeight: '300px' }}>
                        <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@vfp209`} showHeader={false} columns={columns} dataSource={mobx.toJS(moreDatas)} pagination={false} draggable={isSetting} onDrop={newDatas => setState({ moreDatas: newDatas })} />
                    </div>
                </WeaNewScroll>
                <div className={`e9desktop-menu-more-btn e9desktop-menu-more-${isSetting ? 'save' : 'setting'}`} onClick={() => this.onSetting(!isSetting)}>
                    <span>{isSetting ? getLabel(86, '保存') : getLabel(385650, '设置')}</span>
                </div>
            </div>
        );
    }

    onSetting(isSetting) {
        this.setState({ isSetting });
        if (!isSetting) {
            const { portalDeskTopStore } = this.props;
            portalDeskTopStore.onSave();
        }
    }

    onAdd(index) {
        const { portalDeskTopStore } = this.props;
        const { state } = portalDeskTopStore;

        let moreDatas = [...state.moreDatas];
        let deleteDatas = moreDatas.splice(index, 1);
        deleteDatas[0].ismore = '0';

        let datas = [...state.datas];
        datas.push(deleteDatas[0]);
        portalDeskTopStore.setState({ datas, moreDatas });

        let sortList = [];
        datas.map((item) => {
            sortList.push({ id: item.id, ismore: '0' });
        });
        moreDatas.map((item) => {
            sortList.push({ id: item.id, ismore: '1' });
        });
        WeaTools.callApi('/api/portal/desktop/sortMenuList', 'POST', { sortList: JSON.stringify(sortList) });
    }

    onDelete(index) {
        const { portalDeskTopStore } = this.props;
        const { state } = portalDeskTopStore;
        let moreDatas = [...state.moreDatas];

        let deleteDatas = moreDatas.splice(index, 1);
        portalDeskTopStore.setState({ moreDatas });

        let id = deleteDatas[0].id;
        WeaTools.callApi('/api/portal/desktop/delMenu', 'POST', { id });
    }
}

export default MoreMenus;
